import { h } from 'vue'
import { ElEmpty, ElMessageBox } from 'element-plus'
import SvgIcon from '@/components/SvgIcon/index.vue'
import 'element-plus/theme-chalk/el-empty.css'

/**
 * 显示一个带有自定义标题、描述和图标的确认对话框，并返回用户的选择。
 * 用户可以选择确认或取消操作，函数将返回一个 Promise 对象。
 * @typedef {object} MessageBoxOptions - 包含对话框配置的选项对象。
 * @property {string} title - 对话框的标题。
 * @property {string} description - 对话框的描述信息。
 * @property {string} icon - 对话框中要显示的图标名称。
 * @param {MessageBoxOptions} options - 配置对话框的选项。
 * @returns {Promise<boolean>} 一个 Promise，解析为 true 如果用户点击确认，否则解析为 false。
 * @example
 * useMessageBox({
 *   title: '生成缴费单',
 *   description: '是否确认生成这 3 条缴费单？',
 *   icon: 'doubt'
 * }).then(confirm => {
 *   if (confirm) {
 *     console.log('用户点击了确认');
 *   } else {
 *     console.log('用户点击了取消');
 *   }
 * }).catch(error => {
 *   console.error('发生错误:', error);
 * });
 */
async function useMessageBox(options) {
  return new Promise((resolve, reject) => {
    ElMessageBox({
      title: options?.title || '提示',
      showCancelButton: true,
      center: true,
      confirmButtonText: options.confirmButtonText || '确认',
      cancelButtonText: options.cancelButtonText || '取消',
      customClass: 'custom-useMessage-box',
      ...options,
      message: () => h(ElEmpty, {
        description: options.description,
      }, {
        image: () => h(SvgIcon, {
          name: options.icon,
          className: 'message-box-icon',
        }),
      }),
    }).then((value) => {
      if (value === 'confirm') {
        resolve(true)
      }
      else {
        resolve(false)
      }
    }).catch((error) => {
      reject(error)
    })
  })
}

export default useMessageBox
